<template>
  <div class="ke-user-info">
    <div class="title">个人信息</div>
    <div class="content">
      <div class="nickName-wrap">
        <div>
          <div class="title">昵称</div>
          <div class="nickName">{{nickName}}</div>
        </div>
        <div class="avatar-wrap">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/api/user/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div class="email-wrap">
        <div class="title">账号</div>
        <div class="email">{{email}}</div>
      </div>
      <div class="personalized-wrap">
        <div>
          <div class="title">个性签名</div>
          <div class="personalized">{{personalized}}</div>
        </div>
        <div class="modify">
          <el-button type="primary" @click="showModify">修改</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="修改用户信息" :visible.sync="isShowDialog">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" :label-width="formLabelWidth">
          <el-input v-model="personalized" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleModify">取 消</el-button>
        <el-button type="primary" @click="isSureModify">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ke-user-info',
  data() {
    return {
      nickName: '',
      email: '',
      personalized: '',
      imageUrl: '',
      headers: {
        id: ''
      },
      formLabelWidth: '120px',
      isShowDialog: false
    }
  },
  mounted() {
    this.nickName = localStorage.getItem('ke_nickName')
    this.email = localStorage.getItem('ke_email')
    this.personalized = localStorage.getItem('ke_personalized')
    this.headers.id = localStorage.getItem('ke_id')
    this.imageUrl = localStorage.getItem('ke_avatar')
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data.avatar
      localStorage.setItem('ke_avatar', this.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/*'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    showModify() {
      // 展示修改对话框
      this.isShowDialog = true
    },
    cancleModify() {
      // 取消修改
      this.isShowDialog = false
    },
    isSureModify() {
      // 确认修改
      this.$axios.post('/api/user/modify', {
        id: localStorage.getItem('ke_id'),
        nickName: this.nickName,
        personalized: this.personalized
      })
      .then(res => {
        this.isShowDialog = false
        localStorage.setItem('ke_nickName', res.data.data.nickName)
        localStorage.setItem('ke_personalized', res.data.data.personalized)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-user-info {
  .title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .nickName-wrap {
    box-sizing: border-box;
    padding-left: 20px;
    padding-bottom: 36px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 36px;
    position: relative;

    .title {
      font-size: 20px;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .nickName {
      font-size: 16px;
      line-height: 1.4;
    }

    .avatar-wrap {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 70px;
      height: 70px;
      cursor: pointer;

      /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 80px;
        height: 80px;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 100%;
        line-height: 178px;
        text-align: center;
      }

      .avatar {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  .personalized-wrap {
    box-sizing: border-box;
    padding-left: 20px;
    padding-bottom: 36px;
    position: relative;

    .title {
      font-size: 20px;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .personalized {
      font-size: 16px;
      line-height: 1.4;
    }

    .modify {
      position: absolute;
      top: 30px;
      right: 20px;
    }
  }

  .email-wrap {
    box-sizing: border-box;
    padding-left: 20px;
    padding-bottom: 36px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 36px;

    .title {
      font-size: 20px;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .email {
      font-size: 16px;
      line-height: 1.4;
    }
  }
}
</style>
